<template>
  <div class="detail-header" v-if="Object.keys(songDetailData).length!==0">
    <div class="header-wrap">
      <div class="header-left">
        <img :src="songDetailData.coverImgUrl" alt="">
      </div>
      <div class="header-right">
        <div class="song-title">
          <span>歌单</span>
          <h3>{{songDetailData.name}}</h3>
        </div>
        <div class="song-icon">
          <img :src="songDetailData.creator.avatarUrl" alt="">
          <span>{{songDetailData.creator.nickname}}</span>
          <span class="timer">{{songDetailData.createTime | LocaleDateString}}</span>
        </div>
        <div class="play-btn">
          <button>
            <span @click="handlePlay">
              <i class="iconfont icon-sanjiaoright
"></i>
              播放全部
            </span>
            <el-tooltip class="item" effect="dark" content="添加播放列表" placement="top-start">
              <span @click="addPlay">+</span>
            </el-tooltip>
          </button>
        </div>
        <div class="song-tags">
          标签：
          <span v-for="(item,index) in songDetailData.tags" :key="index">{{item}}</span>
        </div>
        <div class="song-num">
          歌曲：
          <span>{{ songDetailData.trackCount }}&nbsp;&nbsp; </span>
          播放：
          <span>{{ songDetailData.playCount | initVolume }}</span>
        </div>
        <div class="song-desc">
          简介：
          <i class="iconfont icon-xiajiantou" v-show="!isShowP" @click="isShowP = !isShowP"></i>
          <i class="iconfont icon-xiangshangjiantou
" v-show="isShowP" @click="isShowP = !isShowP"></i>
          <p class="desc" :class="{showP: !isShowP}">
            {{songDetailData.description}}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  props: {
    songDetailData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 显示或隐藏全部desc描述内容
      isShowP: false
    }
  },
  methods: {
    handlePlay() {
      this.$emit('loadmusic')
      this.$bus.$emit('later', false)
    },
    addPlay() {
      this.$emit('loadmusic')
      this.$bus.$emit('later', true)
    }
  }
}
</script>

<style lang="less" scoped>
.detail-header {
  .header-wrap {
    display: flex;
    padding: 20px 0;
    .header-left {
      height: 200px;
      img {
        height: 100%;
        border-radius: 10px;
      }
    }
    .header-right {
      margin-left: 20px;
      flex: 1;
      .song-title {
        display: flex;
        align-items: center;
        span {
          border: 1px solid hotpink;
          color: red;
          font-weight: 600;
          padding: 5px 10px;
        }
        h3 {
          margin-left: 10px;
        }
      }
      .song-icon {
        display: flex;
        align-items: center;
        margin: 10px 0;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        span {
          &:nth-of-type(1) {
            color: cyan;
            margin: 0 10px;
          }
        }
      }
      .play-btn {
        height: 40px;
        margin: 5px 0;
        button {
          display: flex;
          background-color: red;
          border: none;
          outline: none;
          height: 100%;
          line-height: 40px;
          border-radius: 20px;
          padding-left: 14px;
          color: #fff;
          // letter-spacing: 3px;
          font-size: 14px;
          box-sizing: border-box;
          cursor: pointer;
          overflow: hidden;
          span {
            margin-right: 10px;
          }
          .el-tooltip {
            border-left: 1px solid #ccc;
            padding-left: 10px;
          }
        }
      }
      .song-tags {
        display: flex;
        align-items: center;
        span {
          margin: 0 8px;
        }
      }
      .song-desc {
        position: relative;
        i {
          position: absolute;
          top: 0;
          right: 0;
        }
        p {
          font-weight: 300;
          white-space: pre-wrap;
          &.showP {
            width: 800px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 300;
          }
        }
      }
    }
  }
}
</style>